<template>
  <div class="temp-static-page">
    <div class="left">
      <div class="title">
        <span>{{ $t('message.text.templateManager') }}</span>
        <i class="knowledge-iconfont keowledge-tianjia" @click="openTempClassDialog('add')"></i>
      </div>
      <div class="classify-boxs" v-loading="classifyLoading">
        <el-scrollbar @scroll="handleScroll">
          <div class="classify-item" v-for="(item, index) in classifyList" :key="index"
            :class="[selectCurrent.id == item.id && 'hover-classify-item', acitveCurrent.id == item.id && 'active']"
            @click="setActive(item)">
            <div class="info-action-box">
              <div class="info">
                <svg class="class-icon">
                  <use v-bind:xlink:href="`#${item.icon}`"></use>
                </svg>
                <div v-tooltip-auto-show>
                  <el-tooltip :content="item.typeName" effect="light">
                    <div class="name">{{ item.typeName }}</div>
                  </el-tooltip>
                </div>
              </div>
              <el-popover :ref="(el) => morePopover(el, item)" placement="bottom-end" popper-class="more-action-popper"
                trigger="click" @hide="popoverHide">
                <div class="more-actions">
                  <div class="aciton-item" @click="doAction('edit', item, index)">
                    <svg class="action-icon">
                      <use xlink:href="#keowledge-bianji"></use>
                    </svg>
                    <span>{{ $t('message.buttons.edit') }}</span>
                  </div>
                  <div class="aciton-item" @click="doAction('del', item, index)">
                    <svg class="action-icon">
                      <use xlink:href="#keowledge-shanchuquanxianzu"></use>
                    </svg>
                    <span>{{ $t('message.buttons.delete') }}</span>
                  </div>
                </div>
                <template #reference>
                  <i class="knowledge-iconfont keowledge-a-zu5047 more-icon" @click.stop="setOpenCurrent(item)"></i>
                </template>
              </el-popover>
            </div>
            <div class="time-box">
              <svg class="time-icon">
                <use xlink:href="#keowledge-chuangjianshijian"></use>
              </svg>
              <span> {{ item.createTime }}</span>
            </div>
          </div>
        </el-scrollbar>
      </div>
    </div>
    <div class="right" v-loading="classifyLoading">
      <jvs-empty v-if="!acitveCurrent.id" :text="$t('message.empty.nullTemplate')"></jvs-empty>
      <template v-if="acitveCurrent.id">
        <div class="title">
          <span>{{ $t('message.text.projectManager') }}</span>
          <el-button type="primary" @click="openTempDialog">
            <svg class="add-icon">
              <use xlink:href="#keowledge-xinjian"></use>
            </svg>{{ $t('message.text.addNewTemplate') }}
          </el-button>
        </div>
        <el-table :data="tableData" header-row-class-name='table-header-class' style="height:calc(100% - 88px);"
          v-loading="tableLoading">
          <el-table-column :label="$t('message.table.templateName')" prop="name">
            <template #default="scope">
              <div class="cover-name">
                <img :src="scope.row.coverUrl">
                <span>{{ scope.row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column :label="$t('message.table.templateType')" prop="type">
            <template #default="scope">
              {{ findByvalue(templateOptionType, scope.row.type) }}
            </template>
          </el-table-column>
          <el-table-column :label="$t('message.table.createTime')" prop="createTime"></el-table-column>
          <el-table-column :label="$t('message.table.operation')" width="220">
            <template #default="scope">
              <div class="table-actions">
                <el-button type="text"
                  @click="tempDoAction('editContent', scope.row)">{{ $t('message.buttons.editContent') }}</el-button>
                <div class="line"></div>
                <el-button type="text"
                  @click="tempDoAction('edit', scope.row, scope.$index)">{{ $t('message.buttons.edit') }}</el-button>
                <div class="line"></div>
                <el-button type="text"
                  @click="tempDoAction('view', scope.row)">{{ $t('message.buttons.priview') }}</el-button>
                <div class="line"></div>
                <el-button type="text" class="button-danger"
                  @click="tempDoAction('del', scope.row)">{{ $t('message.buttons.delete') }}</el-button>
              </div>
            </template>
          </el-table-column>
          <template #empty>
            <jvs-empty></jvs-empty>
          </template>
        </el-table>
        <div class="temp-page-box">
          <el-pagination background layout="prev, pager, next" :total="pageObj.total" :page-size="pageObj.size"
            v-model:current-page="pageObj.current" @current-change="handleCurrentChange" />
        </div>
      </template>
    </div>
  </div>
  <el-dialog v-model="tempDialogVisible" class="custom-dialog" width="482px" :show-close='false'
    :close-on-click-modal="false" modal-class="dialog-center" :before-close="handleClose">
    <div class="custom-dialog-header">
      <div class="title-box">
        <div class="title">
          {{ openClassifyType == 'add' ? $t('message.addNew') : $t('message.buttons.edit') }}{{ openDialogType == 'classify' ? $t('message.text.templateType') : $t('message.text.template') }}
        </div>
      </div>
      <svg class="close-icon" @click="handleClose">
        <use xlink:href="#keowledge-danchuangguanbi1"></use>
      </svg>
    </div>
    <div class="custom-dialog-body">
      <el-form :model="templateForm" :rules="templateRules" size="large" ref="tempFormRef">
        <el-form-item prop="typeName" v-if="openDialogType == 'classify'">
          <div class="custom-form-title"><span class="require">*</span>{{ $t('message.form.typeName') }}</div>
          <el-input v-model="templateForm.typeName" :placeholder="$t('message.placeholder.pleaseTypeName')" />
        </el-form-item>
        <el-form-item prop="icon" v-if="openDialogType == 'classify'">
          <div class="custom-form-title"><span class="require">*</span>{{ $t('message.form.typeIcon') }}</div>
          <jvs-icon-select v-model:icon="templateForm.icon"
            :placeholder="$t('message.placeholder.pleaseCheckIcon')"></jvs-icon-select>
        </el-form-item>
        <el-form-item prop="name" v-if="openDialogType == 'template'">
          <div class="custom-form-title"><span class="require">*</span>{{ $t('message.form.templateName') }}</div>
          <el-input v-model="templateForm.name" :placeholder="$t('message.placeholder.pleaseTemplateName')" />
        </el-form-item>
        <el-form-item prop="type" v-if="openDialogType == 'template'">
          <div class="custom-form-title"><span class="require">*</span>{{ $t('message.form.templateType') }}</div>
          <el-select v-model="templateForm.type" :placeholder="$t('message.placeholder.pleaseSelectTemplateType')"
            :disabled="openClassifyType == 'edit'">
            <el-option v-for="(item, index) in getTempOptionType" :key="index" :label="$t(item.label)"
              :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="coverUrl" v-if="openDialogType == 'template' && isShowCover">
          <div class="custom-form-title"><span class="require">*</span>{{ $t('message.form.templateCover') }}</div>
          <el-upload class="avatar-uploader" :action="`/mgr/jvs-auth/upload/jvs-document-file`" :data="paramData"
            :headers="header" accept=".jpg,.jpeg,.png" :show-file-list="false" :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="templateForm.coverUrl" :src="templateForm.coverUrl" class="avatar">
            <el-icon class="el-icon-plus avatar-uploader-icon" v-else>
              <Plus />
            </el-icon>
            <template #tip>
              <div style="height: 20px;display: flex;align-items: center;" class="el-upload__tip">
                {{ $t('message.form.coverTips') }}</div>
            </template>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="custom-dialog-footer">
        <el-button @click="handleClose">{{ $t('message.buttons.cancal') }}</el-button>
        <el-button type="primary" @click="handleSave">{{ $t('message.buttons.submit') }}</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch,
  onMounted,
  getCurrentInstance,
  computed
} from 'vue'
import type { FormRules } from 'element-plus'
import { getTemplateTypeAll, delTemplateId, pageTemplate, delTemplate, saveTemplateType, saveTemplate } from '@/api/template'
import { findByvalue } from '@/utils/util.js'
import { useRouter, useRoute } from "vue-router"
import jvsIconSelect from '@/components/basic-assembly/iconSelect.vue'
import useUserInfoStore from '@/store/userInfo'
import { require } from '@/utils/require'
import defaultUrl from '@/assets/images/wel.png'
import { useHookI18n } from '@/hooks/i18n'
const { locale, $t } = useHookI18n()
const userStore = useUserInfoStore()
const router = useRouter();
const route = useRoute();

const emit = defineEmits([""])
const { proxy } = getCurrentInstance()
const templateType = ref('text')
const classifyList = ref([])
const checkedClassify = ref({})
const selectCurrent = ref({})
const acitveCurrent = ref({})
const morePopRefList = ref(new Map())
const classifyLoading = ref(false)
const tableData = ref([])
const tableLoading = ref(false)
const openDialogType = ref('')
const openClassifyType = ref('')
const tempDialogVisible = ref(false)
const classifyIndex = ref(-1)
const templateForm = ref({
  id: "",
  typeName: '',
  icon: '',
  name: '',
  type: '',
  coverUrl: '',
  coverFilePath: "",
  coverBucketName: ''
})
const tempFormRef = ref()
const templateRules = ref<FormRules>({
  typeName: [{
    validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error($t('message.placeholder.pleaseTypeName')))
      } else {
        callback()
      }
    }, trigger: 'blur'
  }],
  icon: [{
    validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error($t('message.placeholder.pleaseCheckIcon')))
      } else {
        callback()
      }
    }
  }],
  name: [{
    validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error($t('message.placeholder.pleaseTemplateName')))
      } else {
        callback()
      }
    }, trigger: 'blur'
  }],
  type: [{
    validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error($t('message.placeholder.pleaseSelectTemplateType')))
      } else {
        callback()
      }
    }
  }],
  coverUrl: [{
    validator: (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error($t('message.placeholder.pleaseUploadCover')))
      } else {
        callback()
      }
    }
  }],
})
const header = ref({
  businessId: '',
  "Authorization": 'Bearer ' + userStore.access_token
})
watch(() => [route], (newVal, oldVal) => {
  if (['/setting/dynamic', '/setting/template'].indexOf(newVal[0].path) != -1) {
    templateType.value = newVal[0].path.indexOf('/template') != -1 ? 'text' : 'variable'
    pageObj.value = {
      current: 1,
      size: 30,
      total: 0
    }
    acitveCurrent.value = {}
    selectCurrent.value = {}
    classifyIndex.value = -1
    tempDialogVisible.value = false
    tableData.value = []
    getClassfiyTemp()
  }
}, { deep: true })
const paramData = {
  module: '/jvs-knowledge-ui/templateCover/'
}
const templateOptionType = [{
  label: 'message.text.richTextDoc',
  value: 'document_html',
  showType: ['text']
}, {
  label: 'message.text.formDocument',
  value: 'document_xlsx',
  showType: ['text']
}, {
  label: 'message.text.mindMapDoc',
  value: 'document_map',
  showType: ['text']
}, {
  label: 'message.text.processDoc',
  value: 'document_flow',
  showType: ['text']
}, {
  label: 'message.text.word',
  value: 'office_doc',
  showType: ['text', 'variable'],
}, {
  label: 'message.text.excel',
  value: 'office_xlsx',
  showType: ['text', 'variable']
}, {
  label: 'message.text.ppt',
  value: 'office_ppt',
  showType: ['text']
}, {
  label: 'message.text.csv',
  value: 'office_csv',
  showType: ['text']
}
]
const pageObj = ref({
  current: 1,
  size: 30,
  total: 0
})
const morePopover = (el, item) => {
  if (el) {
    morePopRefList.value.set(item.id, el)
  }
}
const isShowCover = computed(() => {
  return ['office_doc', 'office_xlsx', 'office_ppt', 'office_csv', 'office_pdf'].indexOf(templateForm.value.type) != -1
})
const getTempOptionType = computed(() => {
  let arr = []
  templateOptionType.forEach((item) => {
    if (item.showType.indexOf(templateType.value) != -1) {
      arr.push(item)
    }
  })
  return arr
})
onMounted(() => {
  templateType.value = route.path.indexOf('/template') != -1 ? 'text' : 'variable'
  getClassfiyTemp()
})
function getClassfiyTemp() {
  classifyLoading.value = true
  getTemplateTypeAll({
    templateType: templateType.value
  }).then(res => {
    if (res.data.code == 0) {
      classifyList.value = res.data.data
      classifyLoading.value = false
      if (classifyList.value.length > 0) {
        checkedClassify.value = classifyList.value[0]
      }
    }
  })
}
function setOpenCurrent(item) {
  selectCurrent.value = item
}
function popoverHide() {
  selectCurrent.value = {}
}
function doAction(type: string, item: any, index: number) {
  classifyIndex.value = index
  switch (type) {
    case 'del':
      openTempClassDialog(type, item, index)
      break;
    default:
      tempDialogVisible.value = true
      templateForm.value = Object.assign({}, templateForm.value, item)
      openClassifyType.value = type
      openDialogType.value = 'classify'
      break;
  }
  morePopRefList.value.get(item.id).hide();
}
function setActive(item: any) {
  if (item.id != acitveCurrent.value.id) {
    pageObj.value = {
      current: 1,
      size: 30,
      total: 0
    }
    acitveCurrent.value = item
    header.value.businessId = item.id
    getPageTemplate()
  }
}
function getPageTemplate() {
  tableLoading.value = true
  pageTemplate({
    current: pageObj.value.current,
    size: pageObj.value.size,
    typeId: acitveCurrent.value.id,
    templateType: templateType.value
  }).then(res => {
    if (res.data.code == 0) {
      tableData.value = res.data.data.records
      pageObj.value.total = res.data.data.total
      //静态图片判断
      tableData.value.forEach(item => {
        let url = item.coverUrl
        if (url) {
          switch (url) {
            case '/assets/images/wel.png':
            case '/styles/wel.png':
              url = defaultUrl
              break;
            default:
              break;
          }
        }
        item.coverUrl = url
      })
    }
  }).finally(() => {
    tableLoading.value = false
  })
}
function openTempClassDialog(type: string, item: any, index: number) {
  switch (type) {
    case 'del':
      proxy.$confirm($t('message.confirm.delType'), $t('message.prompt'), {
        confirmButtonText: $t('message.buttons.submit'),
        cancelButtonText: $t('message.buttons.cancal'),
        type: 'warning'
      }).then(() => {
        delTemplateId(item.id).then(res => {
          if (res.data.code == 0) {
            classifyList.value.splice(index, 1)
            if (item.id == acitveCurrent.value.id) {
              acitveCurrent.value = {}
            }
          }
        })
      }).catch(() => { });
      break;
    case 'edit':
    case 'add':
      openClassifyType.value = type
      openDialogType.value = 'classify'
      tempDialogVisible.value = true
      break
    default:
      break;
  }
}
function openTempDialog() {
  openClassifyType.value = 'add'
  openDialogType.value = 'template'
  tempDialogVisible.value = true
}
function handleCurrentChange() {
  getPageTemplate()
}
function tempDoAction(type: string, item: any, index: number) {
  switch (type) {
    case 'del':
      proxy.$confirm($t('message.confirm.delPerTemplate'), $t('message.prompt'), {
        confirmButtonText: $t('message.buttons.submit'),
        cancelButtonText: $t('message.buttons.cancal'),
        type: 'warning'
      }).then(() => {
        delTemplate(item.id).then(res => {
          if (res.data.code == 0) {
            if (tableData.value.length == 1) {
              pageObj.value.current -= 1
              if (pageObj.value.current == 0) {
                pageObj.value.current = 1
              }
            }
            getPageTemplate()
          }
        })
      }).catch(() => { });
      break;
    case 'edit':
      templateForm.value = JSON.parse(JSON.stringify(item))
      classifyIndex.value = index
      openClassifyType.value = type
      openDialogType.value = 'template'
      tempDialogVisible.value = true
      break
    case 'view':
      proxy.$openTemplateView({
        templateInfo: item,
        templateType: templateType.value,
        showFooter: false
      })
      break
    case 'editContent':
      if (['document_html', 'document_xlsx', 'document_map', 'document_flow',].includes(item.type)) {
        proxy.$openUrl(`/#/editor?knowId=&docId=${item.id}&fromId=&type=template`, '_blank')
      } else {
        proxy.$openUrl(`/#/editorOffice?knowId=&docId=${item.id}&fromId=&type=template&isDesign=${templateType.value}`, '_blank')
      }
      break
    default:
      break;
  }
}
function handleClose() {
  templateForm.value = {
    id: "",
    typeName: '',
    icon: '',
    name: '',
    type: '',
    coverUrl: '',
    coverFilePath: "",
    coverBucketName: ''
  }
  tempFormRef.value.resetFields()
  tempDialogVisible.value = false
}
function handleSave() {
  tempFormRef.value.validate((valid: boolean) => {
    if (valid) {
      switch (openDialogType.value) {
        case 'classify':
          saveTemplateType(Object.assign({}, templateForm.value, { templateType: templateType.value })).then(res => {
            if (res.data.code == 0) {
              if (openClassifyType.value == 'edit') {
                classifyList.value[classifyIndex.value].typeName = templateForm.value.typeName
                getClassfiyTemp()
              } else {
                getClassfiyTemp()
              }
              handleClose()
            }
          })
          break;
        case 'template':
          let obj = {}
          if (templateForm.value.type == 'office_doc') {
            obj = { nameSuffix: 'docx' }
          } else if (templateForm.value.type == 'office_xlsx') {
            obj = { nameSuffix: 'xlsx' }
          } else if (templateForm.value.type == 'office_csv') {
            obj = { nameSuffix: 'csv' }
          } else if (templateForm.value.type == 'office_ppt') {
            obj = { nameSuffix: 'pptx' }
          } else if (templateForm.value.type == 'office_pdf') {
            obj = { nameSuffix: 'pdf' }
          }
          let coverFilePath = '/assets/images/wel.png'
          if (isShowCover.value) {
            obj = Object.assign({}, {
              typeId: acitveCurrent.value.id,
              templateType: templateType.value,
              coverBucketName: coverFilePath.lastIndexOf('/assets/') != 0 ? 'jvs-document-file' : null,
              coverFilePath: coverFilePath,
              coverUrl: defaultUrl,
              ...obj
            }, templateForm.value)
          } else {
            obj = Object.assign({}, templateForm.value, {
              typeId: acitveCurrent.value.id,
              templateType: templateType.value,
              coverBucketName: coverFilePath.lastIndexOf('/assets/') != 0 ? 'jvs-document-file' : null,
              coverFilePath: coverFilePath,
              coverUrl: defaultUrl,
              ...obj
            })
          }
          saveTemplate(obj).then(res => {
            if (res.data.code == 0) {
              if (openClassifyType.value == 'edit') {
                tableData.value.splice(classifyIndex.value, 1, Object.assign({}, tableData.value[classifyIndex.value], templateForm.value))
              } else {
                getPageTemplate()
              }
              handleClose()
            }
          })
          break;
        default:
          break;
      }
    }
  })
}
function handleAvatarSuccess(res, file) {
  if (res.code == 0) {
    templateForm.value.coverUrl = res.data.fileLink
    templateForm.value.coverFilePath = res.data.fileName
    templateForm.value.coverBucketName = res.data.bucketName
  }
}
function beforeAvatarUpload(file) {
  const isJPG = file.type === 'image/jpeg' || file.type === 'image/jpg' || file.type === 'image/png';
  const isLt20M = file.size / 1024 / 1024 < 20;
  if (!isJPG) {
    proxy.$notify({
      title: $t('message.prompt'),
      message: $t('message.message.uploadCoverType'),
      type: 'error',
      position: 'bottom-right'
    });
  }
  if (!isLt20M) {
    proxy.$notify({
      title: $t('message.prompt'),
      message: $t('message.message.uploadCoverSize'),
      type: 'error',
      position: 'bottom-right'
    });
  }
  return isJPG && isLt20M;
}
function handleScroll() {
  if (selectCurrent.value.id) {
    morePopRefList.value.get(selectCurrent.value.id).hide();
  }
}
</script>
<style lang="scss" scoped>
.temp-static-page {
  height: 100%;
  position: relative;
  display: flex;

  .left {
    width: 176px;
    height: 100%;
    background: #FCFCFC;

    .classify-boxs {
      margin-top: 12px;
      height: calc(100% - 52px);

      .classify-item {
        transition: all 0.2s;
        padding: 0px 8px;
        box-sizing: border-box;
        margin: 0px 8px;
        width: calc(100% - 16px);
        border-radius: 4px;
        margin-bottom: 8px;
        height: 56px;
        display: flex;
        justify-content: center;
        flex-direction: column;
        cursor: pointer;

        .info-action-box {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .info {
            display: flex;
            align-items: center;
            font-size: 14px;
            @include SourceHanSansCN-Regular;
            color: #363B4C;

            .name {
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              max-width: 110px;

              span {
                width: 100%;
              }
            }

            .class-icon {
              min-width: 20px;
              width: 20px;
              height: 20px;
              margin-right: 4px;
            }
          }

          .more-icon {
            font-size: 20px;
            visibility: hidden;
            color: #C2C5CF;
            border-radius: 4px;

            &:hover {
              background-color: #E4EDFF;
              color: #1E6FFF;
            }
          }
        }

        &:hover {
          background: #EEEFF0;

          .info-action-box {
            .more-icon {
              visibility: visible;
            }
          }

        }

        .time-box {
          color: #6F7588;
          font-size: 12px;
          @include SourceHanSansCN-Regular;
          display: flex;
          align-items: center;
          height: 18px;

          .time-icon {
            min-width: 12px;
            width: 12px;
            height: 12px;
            margin-right: 2px;
          }
        }
      }

      .active {
        background-color: #DDEAFF !important;

        .info-action-box {
          .info {
            color: #1E6FFF !important;
          }
        }
      }

      .hover-classify-item {
        background-color: #EEEFF0;

        .more-icon {
          visibility: visible !important;
          background-color: #E4EDFF !important;
          color: #1E6FFF !important;
        }
      }

    }
  }

  .right {
    width: calc(100% - 176px);
    padding: 16px 24px;
    box-sizing: border-box;

    .title {
      background: none !important;
      padding: 0px !important;
      margin-bottom: 16px;
    }

    ::v-deep(.table-header-class) {
      color: #363B4c;
      @include SourceHanSansCN-Bold;
      font-size: 12px;
      background: #F5F6F7;

      th {
        background: #F5F6F7;
      }
    }

    ::v-deep(.el-scrollbar__view) {
      height: 100%;
    }

    .cover-name {
      display: flex;
      align-items: center;

      img {
        width: 54px;
        height: 54px;
        margin-right: 16px;
      }
    }

    .table-actions {
      display: flex;
      align-items: center;

      .button-danger {
        color: #FF194C;
      }

      .line {
        min-width: 1px;
        height: 14px;
        background: #EEEFF0;
        margin: 0px 8px;
      }
    }

    .temp-page-box {
      display: flex;
      justify-content: end;
      margin-top: 8px;
    }
  }

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 16px;
    height: 40px;
    background: linear-gradient(179deg, rgba(30, 111, 255, 0.05) 0%, rgba(30, 111, 255, 0) 100%);
    font-size: 16px;

    span {
      @include SourceHanSansCN-Bold;
    }

    i {
      color: #6F7588;
      cursor: pointer;
    }

    .add-icon {
      width: 14px;
      height: 14px;
      margin-right: 4px;
    }
  }
}

.more-actions {
  .aciton-item {
    padding: 0px 12px;
    height: 36px;
    display: flex;
    align-items: center;
    cursor: pointer;

    .action-icon {
      width: 16px;
      height: 16px;
      margin-right: 10px;
    }

    &:hover {
      background: #eeeff0;
    }
  }

  .aciton-item+.aciton-item {
    margin-top: 8px;
  }
}

.custom-dialog-body {
  padding: 24px 32px;

  ::v-deep(.el-select) {
    width: 100%;
  }

  .avatar-uploader {
    line-height: 20px;

    ::v-deep(.el-upload) {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .el-upload__tip {
    margin-top: 4px;
  }
}
</style>
<style lang="scss">
.more-action-popper {
  padding: 12px 0px !important;
}
</style>